<template>
  <div>
    <div class="toolbar">
      <el-form :inline="true" size="small" >
        <el-form-item label="用户ID" ><el-input v-model.trim="queryFrom.id" /></el-form-item>
        <el-form-item label="用户名称"><el-input v-model.trim="queryFrom.username" /></el-form-item>
        <el-form-item v-if="showrole" label="角色"><role v-model.trim="queryFrom.role" /></el-form-item>
        <el-button size="small" type="primary" @click="sendQuery">提交</el-button>
      </el-form>
      <analyse-table :table-data="tableData" :key_mapper="key_mapper" :sortable = "false" :min-width = "160" size="small" @sort-change="sortChange">
        <el-table-column label="操作" min-width="260">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="edit(scope.row)" >编辑</el-button>
            <el-button type="primary" size="small" @click="Rechargepassword(scope.row)">重置密码</el-button>
            <el-button type="danger" size="small" @click="deleterole(scope.row)" >删除</el-button>
          </template>
        </el-table-column>
      </analyse-table>
      <el-pagination :current-page.sync="page" :page-size="size" :total.sync="total" class="mt-10" layout="total, sizes, prev, pager, next, jumper" @current-change="currentChange" @size-change="handleSizeChange"/>
      <el-dialog :visible.sync="dialogFormVisible" title="用户编辑">
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="110px" class="demo-ruleForm">
          <el-form-item label="用户ID" prop="id" width><el-input v-model="ruleForm.id" disabled style="width: 400px" /></el-form-item>
          <el-form-item label="用户名称" prop="role_name"><el-input v-model="ruleForm.role_name" disabled style="width: 400px" /></el-form-item>
          <el-form-item label="申请时间" prop="updated_at"><el-input v-model="ruleForm.updated_at" disabled style="width: 400px" /></el-form-item>
          <el-form-item label="用户所属角色" prop="role">
            <el-select v-model="ruleForm.merchant_role" placeholder="请选择" >
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="parseInt(item.value)" sortable/>
            </el-select>
          </el-form-item>
          <el-form-item label="用户描述" prop="desc"><el-input v-model="ruleForm.desc" style="width: 400px" rows="5" type="textarea"/></el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" size="small" @click="sendbtn">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { merchantUser, updateUser, rolePreset, deleteUser ,Rechargepassword} from '@/api/role'
import mixins from '@/model/mixins'
import {useVcode} from '@/utils/Vcode'

export default {
  name: 'Help',
  mixins: [mixins],
  data() {
    return {
      dialogFormVisible: false,
      showrole:true,
      queryFrom: {
        id: '',
        username: '',
        role: []
      },
      merchant: '',
      id: '',
      sendDate: {},
      options: [],
      key_mapper: [
        { key: 'id', name: '用户ID', width: 100 }, { key: 'username', name: '用户名称', width: 145 ,class:'ellipsis' },
        { key: 'role_name', name: '角色', width: 120 },
        { key: 'desc', name: '用户描述', width: 200 }, { key: 'created_at', name: '注册时间', width: 145 },
          { key: 'updated_at', name: '最后修改时间', width: 145 }, { key: 'last_logined_at', name: '最后登陆时间', width: 145 }
      ],
      ruleForm: {
      },
      rules: {
        role_name: [{ required: true, min: 1, max: 30, message: '请填写用户名称', trigger: 'blur' }],
        desc: [{ required: true, min: 1, message: '请填写用户描述', trigger: 'blur' }],
        id: [{ required: true, message: '请填写用户ID', trigger: 'blur' }],
        role: [{ required: true, min: 1, message: '请选择用户所属角色', trigger: 'blur' }]
        // perm: [{ required: true, message: '请选择开放权限功能', trigger: 'blur' }]
      },
      API: merchantUser
    }
  },
  created() {
  },
  activated () {
    this.gitrole()
  },
  methods: {
    gitrole(){
      this.showrole=false
      rolePreset({}).then(res => {
        const options = []
        for (const key in res.data.available) {
          options.push({ label: res.data.available[key], value: key })
        }
        this.options = options
        this.showrole=true
        // console.log(options)
      }, err => {
        this.$message({ type: 'error', message: err.response.data.msg })
      })
    },
    currentChange(val) {
      this.sendData.page = val
      this.getData(this.sendData)
    },
    edit(row) {
      this.id = row.id
      this.ruleForm = row
      this.ruleForm.role = this.ruleForm.role.replace(/,/g, '')
      // console.log(this.ruleForm.role)
      this.dialogFormVisible = true
    },
    addBusin() {
      this.id = ''
      this.ruleForm = {}
      this.dialogFormVisible = true
    },

    Rechargepassword(row){
      this.$confirm(`确认重置ID为${row.id}的用户: ${row.username}？`, '是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        useVcode(this, () => {
          Rechargepassword({user_id:row.id}).then(() => {
            this.$message({ type: 'success', message: '重置成功!' })
            this.sendQuery()
          }, err => {
            this.$message({ type: 'error', message: err.response.data.msg })
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消重置'
        })
      })
    },
    deleterole(row) {
      this.$confirm(`确认删除ID为${row.id}的用户: ${row.username}？`, '是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        useVcode(this, () => {
        deleteUser(row.id, {}).then(() => {
          this.$message({ type: 'success', message: '删除成功!' })
          this.sendQuery()
        }, err => {
          this.$message({ type: 'error', message: err.response.data.msg })
        })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    clear() {
      this.ruleForm = {}
    },
    sendbtn() {
      useVcode(this, () => {
      this.$refs['ruleForm'].validate((valid) => {
        if (!valid) {
          console.log('error submit!!')
          return false
        }
        const data = {
          user_id: this.id * 1,
          new_role_id: this.ruleForm.merchant_role,
          description: this.ruleForm.desc
        }
        updateUser(data).then(() => {
          this.$message({ message: '保存成功', type: 'success' })
          this.dialogFormVisible = false
          this.clear()
          this.getData(this.sendDate)
        }, err => {
          this.$message({ type: 'error', message: err.response.data.msg })
        })
      })
      })
    }
  }
}
</script>
